<template>
        <div class="useritem" :class="elclass">
          <div
           class="item-rank center"
           :class="{wsb:rank>10||rank==0}"
           >
           {{rank>10||rank==0?'未上榜':rank}}</div>
          <div class="item-bg center" ></div>
          <div class="item-avatar center" center></div>
          <div class="item-name center">用户昵称用户昵</div>
                  <div class="item-distance center">
              距上一名<br/>
                <span>2000000</span>
          </div>
        
      </div>
</template>

<script>
import { toRefs } from '@vue/reactivity'
export default {
    props:{
        class:{
            require:true,
            type:true
        },
        rank:{
            type:Number,
            require:true
        }
    },
    setup(props,context){
        const {elclass,rankimg,rank} = toRefs(props)
        console.log(rank.value);
        return {
            elclass,
            rankimg,
            rank
        }
    }
}
</script>
<style scoped lang="less">
.center{
    top: 60%;
    transform: translateY(-50%);
}

    // display: flex;
    // flex-direction: column;
     .useritem{
        width: 100%;
        height: 90px;
        // background-color: orangered;
        position: relative;
        background-image: url(../assets/page2/userbfg.png);
        margin-top: 27px;
        
      .item-rank{
            position: absolute;
            left: 15px;
            height:14px;
            font-size: 14px;
            font-family: Arial;
            font-weight: 400;
            color: #FFF8BC;
            
        }
        .wsb{
            width: 15px;
            height: 60px;
            
        }
        // .item-bg{
        //     position: absolute;
        //     left: 55px;
        //     width: 47px;
        //     height: 46px;
        //     // background-image: url(../assets/page3/hn_kuang@3x.png);
        //     z-index: 1;
        // }
        .item-avatar{
            position: absolute;
            left: 40px;
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
        }
        .item-name{
            position: absolute;
            left: 100px;
            width: 125px;
            // background-color: #F85710;
            height: 25px;
            line-height: 25px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 600;
            color: #FFFCE7;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .item-distance{
            position: absolute;
          
            right:23px;
            width: 50px;
            height: 40px;
            line-height: 20px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            span{
                color: #FFF17D;
            }
        }
 
    }


    
</style>